<template>
  <view :class="['page-container', locale]">
    <custom-nav-bar :isScrolled="isResourcesScrolled"/>
    <view :class="['content-container']">
      <!-- 左侧内容区域 选择分类 -->
      <scroll-view class="categories-sidebar" scroll-y @scroll="onCategoriesScroll">
        <view
            v-for="(category, index) in categories" :key="index"
            :class="['category-item', selectedCategory === index ? 'active' : '']"
            @click="onSelectCategory(index)"
        >
          {{ category.name }}
        </view>
      </scroll-view>

      <!-- 右侧内容区域 -->
      <scroll-view class="content-area" scroll-y @scroll="onContentScroll">
        <!-- search  -->
        <view class="search-container">
          <view class="search-box" style="font-family: 'uighurche', serif;">
            <image class="search-icon" src="/static/icon/search.svg" mode="aspectFit"/>
            <input
                class="search-input" type="text" :placeholder="lang.searchPlaceholder"
                v-model="searchQuery" @input="onSearch" confirm-type="search"
            />
          </view>
        </view>


        <view class="padding-30 column">
          <view v-for="(resource, index) in resources" :key="index"
                class="card flex-center gap-20 resource-card" style="margin:0 0 20rpx"
                @click="openPreview(index)">
            <!-- سول تەرەپتىكى رەسىم -->
            <view :class="['radio-20']">
              <image class="resource-image" :alt="resource.name" :src="resource.image" mode="aspectFit"/>
            </view>

            <!-- ئوڭ تەرەپتىكى مەزمۇن -->
            <view class="column-between flex-1" style="gap: 40rpx">
              <view class="text-to text-32">{{ resource.name }}</view>
              <view>
                <view class="flex-between gap-30">
                  <!-- 页面次数等等...-->
                  <view class="column gap-8 text-26">
                    <view>{{ myReplace(lang.totalPages, '{page}', resource.page_count) }}</view>
                    <view class="flex-center gap-20 color-grey">
                      <view class="flex-center gap-8">
                        <image class="icon" src="/static/Resources/view.svg" mode="aspectFit"/>
                        <view>{{ resource.view }}</view>
                      </view>
                      <view class="flex-center gap-8">
                        <image class="icon" src="/static/Resources/print.svg"
                               mode="aspectFit"/>
                        <view>{{ resource.print }}</view>
                      </view>
                    </view>
                  </view>
                  <view class="center print-btn" @click.stop="onPrintResource(index)">
                    <image class="icon" style="filter: brightness(0) invert(1);"
                           src="/static/Resources/print.svg" mode="aspectFit"/>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <tab-bar :current="1"/>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomNavBar from "@/components/CustomNavBar/CustomNavBar.vue";
import TabBar from "@/components/TabBar/TabBar.vue";
import {mapState} from "vuex";
import {getFileExtension, myReplace} from "@/utils/utils";

export default Vue.extend({
  name: "Resources",
  components: {CustomNavBar, TabBar},
  data() {
    return {
      showShadow: false,
      isResourcesScrolled: false, // 是否滚动

      selectedCategory: 0,
      categories: [],
      resources: [],

      searchQuery: '',
      filteredResources: [],
    }
  },
  computed: {
    ...mapState(['systemInfo']),
    lang(): any {
      return this.$t('resources');
    }
  },
  onLoad(query?: AnyObject) {
    this.getCategoryData()
  },
  methods: {
    myReplace,
    getCategoryData() {
      // 临时写法，  api请求
      let data = [
        {id: 1, name: 'ئۆگىنىش'},
        {id: 2, name: 'ئېلىم سېتىم توختامى'},
        {id: 3, name: 'ئۆي توختامى'},
        {id: 4, name: 'قانۇن'},
        {id: 5, name: 'ئىجارە توختام'},
        {id: 6, name: 'ئەمگەك توختام'},
        {id: 7, name: 'تەرجىمىھال'},
        {id: 8, name: 'شىرىكچىلىك'},
        {id: 9, name: 'سودا ئىشلىرى'},
        {id: 10, name: 'كەسىپكار'},
        {id: 11, name: 'كەسىپكار'},
        {id: 12, name: 'كەسىپكار'},
        {id: 13, name: 'كەسىپكار'},
        {id: 17, name: 'كەسىپكار'},
        {id: 18, name: 'كەسىپكار'},
      ]
      data.unshift({id: 0, name: 'ھەممە'})
      this.categories = data
      this.getResourcesData()
    },
    getResourcesData() {
      const {id} = this.categories[this.selectedCategory]

      // 临时出了，  api请求
      let data = [
        {
          id: 1,
          name: 'Business Report Business Report Business Report',
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112818173727.pdf',
          page_count: 12,
          print: 12,
          view: 12,
          image: '/static/ext/image.svg',
          category_id: 1
        },
        {
          id: 2,
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112818173727.pdf',
          name: 'Meeting Notes',
          page_count: 5,
          print: 12,
          view: 12,
          image: '/static/ext/image.svg',
          category_id: 2
        },
        {
          id: 4,
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112818173727.pdf',
          name: 'Project Proposal',
          page_count: 8,
          print: 12,
          view: 12,
          image: '/static/ext/ppt.svg',
          category_id: 3
        },
        {
          id: 5,
          name: 'Project Proposal',
          page_count: 12,
          print: 12,
          view: 12,
          image: '/static/ext/word.svg',
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112818173727.pdf',
          category_id: 3
        },
        {
          id: 6,
          name: 'Project Proposal',
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112821225609.pdf',
          page_count: 24,
          print: 12,
          view: 12,
          image: '/static/ext/word.svg',
          category_id: 3
        },
        {
          id: 7,
          name: 'Project Proposal',
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112821225609.pdf',
          page_count: 8,
          print: 12,
          view: 12,
          image: '/static/ext/word.svg',
          category_id: 4
        },
        {
          id: 8,
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112821225609.pdf',
          name: 'Project Proposal',
          page_count: 20,
          print: 12,
          view: 12,
          image: '/static/ext/xlsx.svg',
          category_id: 8
        },
        {
          id: 9,
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112821225609.pdf',
          name: 'Project Proposal',
          page_count: 20,
          print: 12,
          view: 12,
          image: '/static/ext/word.svg',
          category_id: 6
        },
        {
          id: 10,
          url: 'https://office.reqem.cn/uploads\\\\word\\\\11\\\\28\\\\2024112821225609.pdf',
          name: 'Project Proposal',
          page_count: 8,
          print: 12,
          view: 12,
          image: '/static/ext/word.svg',
          category_id: 3
        },
      ]

      if (id === 0) {
        this.resources = data
      } else {
        this.resources = data.filter(item => item.category_id === id);
      }
    },
    onSelectCategory(index: number) {
      this.selectedCategory = index
      this.getResourcesData()
    },
    onPrintResource(index: number) {
      // 跳转打印页面
      console.log(`Printing resource ${this.resources[index]}`)
    },
    // item 点击事
    openPreview(index: number) {
      const {url} = this.resources[index]
      uni.downloadFile({
        url: url, // 网络资源 URL
        success: (res) => {
          console.log("res.tempFilePath -==--=", res.tempFilePath)
          uni.openDocument({
            filePath: res.tempFilePath,
            fileType: getFileExtension(res.tempFilePath),
            success: () => {
              console.log('打开文档成功');
            }
          })
        },
      })
    },
    // 搜索
    onSearch() {
      const {resources} = this
      const searchQuery = this.searchQuery.trim()
      console.log("this.searchQuery -=-=", searchQuery)
      if (!searchQuery) {
        this.getResourcesData()
        return;
      }
      this.resources = resources.filter(resource =>
          resource.name.toLowerCase().includes(searchQuery.toLowerCase())
      );
    },
    onCategoriesScroll({detail: {scrollTop}}: any) {
      this.isResourcesScrolled = scrollTop > 50
      console.log('Categories scrollTop:', scrollTop, this.isResourcesScrolled)
    },

    onContentScroll({detail: {scrollTop}}: any) {
      this.isResourcesScrolled = scrollTop > 50
      console.log('Content scrollTop:', scrollTop, this.isResourcesScrolled)
    }
  }
})
</script>

<style scoped lang="scss">
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
}

.content-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.categories-sidebar {
  width: 200rpx;
  background-color: #ffffff;
  height: 100%;
  overflow-y: auto;

  .category-item {
    padding: 30rpx 40rpx;
    transition: all 0.3s;
    font-size: 28rpx;
    border-left: 8rpx solid transparent;

    &.active {
      background-color: #f8f9fc;
      color: #007AFF;
      border-left-color: #007AFF;
      font-weight: 500;
    }
  }
}

.content-area {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  //`box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

  .resource-card {
    transition: all 0.3s ease;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-2rpx);
      box-shadow: 0 4rpx 25rpx rgba(0, 0, 0, 0.08);
    }

    .resource-image {
      width: 120rpx;
      height: 150rpx;
      object-fit: cover;
    }

    .icon {
      width: 36rpx;
      height: 36rpx;
      //filter: drop-shadow(0 0 0 #000000);
    }

    .print-btn {
      background-color: #007AFF;
      padding: 6rpx 14rpx;
      border-radius: 12rpx;

      &:active {
        background-color: #0056b3;
      }

      .icon {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
}


.search-container {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 20rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.search-input {
  text-align: center;
  flex: 1;
  border: none;
  background: none;
  font-size: 28rpx;
  color: #333;

  &::placeholder {
    color: #999;
  }
}

.ug-CN {
  .category-item {
    border-left: none;
    border-right: 8rpx solid transparent;

    &.active {
      border-right-color: #007AFF;
    }
  }
}
</style>